<template>
  <view class="container">

    <!-- 动态模块显示 -->
    <view class="function-section" v-for="(moduleGroup, groupIndex) in moduleGroups" :key="groupIndex">
      <view class="section-header">
        <text class="section-title">{{ moduleGroup.title }}</text>
      </view>
      
      <view class="function-grid" v-if="moduleGroup.modules.length > 0">
        <uni-row :gutter="12">
          <uni-col :span="6" v-for="(item, index) in moduleGroup.modules" :key="index">
            <view class="function-item" @click="navigateTo(item.url)">
              <view class="function-icon" :style="{ backgroundColor: item.color }">
                <uni-icons :type="item.icon" size="22" color="#ffffff"></uni-icons>
              </view>
              <text class="function-name">{{ item.name }}</text>
              <view v-if="item.badge" class="function-badge">
                <text class="badge-text">{{ item.badge }}</text>
              </view>
            </view>
          </uni-col>
        </uni-row>
      </view>
    </view>

    <!-- 版本信息 -->
    <view class="version-info">
      <text class="version-text">若依管理系统 v4.7.8</text>
      <text class="copyright-text">Copyright © 2024 RuoYi All rights reserved.</text>
    </view>
  </view>
</template>

<script setup>
import {computed, onMounted } from "vue"
import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore()

// 动态获取所有模块组
const moduleGroups = computed(() => {
  const routers = userStore.routers || []
  const groups = []
  
  routers.forEach(router => {
    // 跳过隐藏的路由和外部链接
    if (router.hidden || (router.meta && router.meta.link)) {
      return
    }
    
    let modules = []
    
    // 如果有子菜单，处理子菜单
    if (router.children && router.children.length > 0) {
      modules = router.children
        .filter(child => !child.hidden && child.meta && child.meta.appIcon && child.meta.appColor)
        .map(child => {
          // 根据分包配置生成正确的URL路径
          let url = `/pages/${child.component}`
          
          // 检查是否是分包页面，如果是则调整URL
          if (child.component) {
            if (child.component.startsWith('system/')) {
              url = `/pages_${child.component}`
            } else if (child.component.startsWith('monitor/')) {
              url = `/pages_${child.component}`
            } else if (child.component.startsWith('filemanager/')) {
              url = `/pages_${child.component}`
            }
          }
          
          const module = {
            name: child.meta.title,
            icon: child.meta.appIcon,
            url: url,
            color: child.meta.appColor
          }
          // 为特定模块添加徽章
          if (child.name === 'Online') {
            module.badge = 'Live'
          } else if (child.name === 'Server') {
            module.badge = 'New'
          }
          return module
        })
    }
    
    // 只有当有可显示的子模块时才添加到组中
    if (modules.length > 0) {
      groups.push({
        title: router.meta ? router.meta.title : router.name,
        modules: modules
      })
    }
  })
  
  return groups
})





// 页面初始化
onMounted(() => {
  // 如果没有路由数据，尝试重新获取
  if (!userStore.routers || userStore.routers.length === 0) {
    console.log('工作台：检测到没有路由数据，尝试重新获取...')
    userStore.getRouters().catch(error => {
      console.error('工作台：获取路由数据失败:', error)
    })
  }
})

// 方法

function navigateTo(url) {
  // 检查是否是 tabbar 页面
  const tabbarPages = ['/pages/index', '/pages/work/index', '/pages/mine/index']
  
  if (tabbarPages.includes(url)) {
    uni.switchTab({
      url: url
    })
  } else {
    uni.navigateTo({
      url: url
    })
  }
}


</script>

<style lang="scss" scoped>
@import '@/styles/common.scss';

.container {
  min-height: 100vh;
  background-color: $gray-100;
  padding-bottom: env(safe-area-inset-bottom);
}

// 功能区域
.function-section {
  margin: $space-lg $space-lg $space-lg $space-lg;
  padding: $space-lg;
  background: $white;
  border-radius: $radius-lg;
  box-shadow: $shadow-sm;
  
  .section-header {
    margin-bottom: $space-lg;
    
    .section-title {
      font-size: $text-xl;
      font-weight: $font-bold;
      color: $gray-900;
      display: block;
      margin-bottom: $space-xs;
    }
    
    .section-desc {
      font-size: $text-sm;
      color: $gray-500;
    }
  }
  
  .function-grid {
    .function-item {
      @include flex-center;
      flex-direction: column;
      gap: $space-sm;
      padding: $space-lg $space-sm;
      border-radius: $radius-lg;
      transition: $transition-base;
      position: relative;
      
      &:active {
        background: $gray-100;
        transform: scale(0.95);
      }
      
      .function-icon {
        width: 44px;
        height: 44px;
        border-radius: $radius-lg;
        @include flex-center;
        margin-bottom: $space-xs;
        box-shadow: $shadow-sm;
      }
      
      .function-name {
        font-size: $text-sm;
        font-weight: $font-medium;
        color: $gray-800;
        text-align: center;
      }
      
      .function-badge {
        position: absolute;
        top: 8px;
        right: 8px;
        padding: 2px 6px;
        background: $error;
        border-radius: $radius-full;
        
        .badge-text {
          font-size: 10px;
          color: $white;
          font-weight: $font-medium;
        }
      }
    }
  }
}

// 版本信息
.version-info {
  text-align: center;
  padding: $space-xl $space-lg;
  
  .version-text {
    font-size: $text-sm;
    color: $gray-600;
    display: block;
    margin-bottom: $space-xs;
  }
  
  .copyright-text {
    font-size: $text-xs;
    color: $gray-500;
  }
}
</style>